<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.js"></script>
    <script type="text/javascript" src="../fonts/iconfont.js" ></script>
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="../js/plug/swiper-3.4.0.jquery.min.js" ></script>
    <script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="../css/index.css" />
    <link href="../css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/plug/mescroll-option.css" />
    <link rel="stylesheet" href="../css/plug/mescroll.min.css" />
    <link rel="stylesheet" href="../css/plug/swiper-3.2.7.min.css" />
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	document.addEventListener('plusready',function(){
        	plus.navigator.setStatusBarBackground("#006EC3");
            plus.navigator.setStatusBarStyle("light");
;  		},false);
    </script>
</head>
<body style="background: red;">
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active clearfix">
				<!--主页下拉可以刷新-->	
				<!--滑动区域-->
				<div id="mescroll1" class="mescroll">
					<!--轮播图-->
					<div class="banner">
						<div id="demo01" class="flexslider">
							<ul class="slides">
								<li><div class="img"><img src="../img/banner.jpg" alt="" /></div></li>
								<li><div class="img"><img src="../img/banner1.jpg" alt="" /></div></li>
							</ul>
						</div>
					</div>
					<div class="menus">
						<a href="#" class="menuOne left">
							<svg class="icon" aria-hidden="true">
						    	<use xlink:href="#icon-xinliyanjiu"></use>
							</svg>
							<label for="">心理咨询师</label>
						</a>
						<a href="#" class="menuOne right">
							<svg class="icon" aria-hidden="true">
						    	<use xlink:href="#icon-falv1"></use>
							</svg>
							<label for="">法律咨询</label>
						</a>
					</div>
					<!--新闻分类切换-->
					<div class="container">
						<div class="swiper-container swiper1">
							<div class="swiper-wrapper">
								<div class="swiper-slide selected">未检新闻</div>
								<div class="swiper-slide">工作动态</div>
								<div class="swiper-slide">社区矫正</div>
								<div class="swiper-slide">刑执情况</div>
								<div class="swiper-slide">众筹帮助</div>
								<div class="swiper-slide">其他</div>
							</div>
						</div>
						<!-- swiper2 -->
						<div class="swiper-container swiper2">
							<div class="swiper-wrapper">
								<div class="swiper-slide swiper-no-swiping">
									<!--展示上拉加载的数据列表-->
									<ul id="dataList1" class="data-list">
										<!--动态渲染-->
									</ul>
								</div>
								<div class="swiper-slide swiper-no-swiping">
									<p class="noContent">
										<svg class="icon" aria-hidden="true">
									    	<use xlink:href="#icon-jingcha"></use>
										</svg>	
										<label for="">暂无内容</label>
									</p>
								</div>
								<div class="swiper-slide swiper-no-swiping">
									<p class="noContent">
										<svg class="icon" aria-hidden="true">
									    	<use xlink:href="#icon-jingcha"></use>
										</svg>	
										<label for="">暂无内容</label>
									</p>
								</div>
								<div class="swiper-slide swiper-no-swiping">
									<p class="noContent">
										<svg class="icon" aria-hidden="true">
									    	<use xlink:href="#icon-jingcha"></use>
										</svg>	
										<label for="">暂无内容</label>
									</p>
								</div>
								<div class="swiper-slide swiper-no-swiping">
									<p class="noContent">
										<svg class="icon" aria-hidden="true">
									    	<use xlink:href="#icon-jingcha"></use>
										</svg>	
										<label for="">暂无内容</label>
									</p>
								</div>
								<div class="swiper-slide swiper-no-swiping">
									<p class="noContent">
										<svg class="icon" aria-hidden="true">
									    	<use xlink:href="#icon-jingcha"></use>
										</svg>
										<label for="">暂无内容</label>
									</p>
								</div>
							</div>
						</div>
					</div>
					
				</div>	
				<!--底部-->
			</div>
		</div>
<script type="text/javascript" src="../js/slider.js" ></script>		
<script src="../js/plug/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/plug/mescroll-option.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/h5.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/page/index.js" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript">
		

		//轮播图
		$('#demo01').flexslider({
		animation: "slide",
		direction:"horizontal",
		easing:"swing"
		});

		//底部栏目切换
		$(document).ready(function(){
			
			//切换底部按钮
			var audio = $("#audio")[0];		
			$(document).on("click touchstart", "a.mui-tab-item", function() {
				$(this).find("svg").addClass("zoomIn");
				audio.play();
				$(this).siblings().find("svg").removeClass("zoomIn");
			});
			
	        //swiper切换效果
	        function setCurrentSlide(ele, index) {
					$(".swiper1 .swiper-slide").removeClass("selected");
					ele.addClass("selected");
					//swiper1.initialSlide=index;
				}

				var swiper1 = new Swiper('.swiper1', {
//					设置slider容器能够同时显示的slides数量(carousel模式)。
//					可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
//					loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
					slidesPerView:'auto',
					paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
					spaceBetween: 10,//slide之间的距离（单位px）。
					freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
					loop: false,//是否可循环
					onTab: function(swiper) {
						var n = swiper1.clickedIndex;
					}
				});
				swiper1.slides.each(function(index, val) {
					var ele = $(this);
					ele.on("click", function() {
						setCurrentSlide(ele, index);
						swiper2.slideTo(index, 500, false);
						//mySwiper.initialSlide=index;
					});
				});

				var swiper2 = new Swiper('.swiper2', {
					//freeModeSticky  设置为true 滑动会自动贴合  
					direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
					loop: false,
					autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
					onSlideChangeEnd: function(swiper) {  //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
						var n = swiper.activeIndex;
						setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
						swiper1.slideTo(n, 500, false);
					}
				});
	        
	        
	        
	        //设置头像大小
	        var picHeight = $(".hnMain").height();
	        $(".hnMain p.hnPic").width(picHeight);
		})
		
</script>		
</body>
</html>